<template>
	<view class="userinfo-box">
		<view class="duihua">
			您已完成99%的操作了，我们即将为您匹配资方，请提交资料
		</view>
		<view class="list-box">
			<view class="title">
				<view class="row1">
					<image src="@/static/Frame1.png" class="icon" mode="widthFix"></image>
					官方认证，保护您的隐私安全
				</view>
				<view class="row2">
					您的身份证号码仅作真实性验证，我方不会另作他用
				</view>
			</view>
			<view class="lists">
				<view class="item border">
					<text class="label">姓名</text>
					<input type="text" @input="onKeyNameInput" v-model="form.username" placeholder="请输入您的真实姓名"
						placeholder-style="font-size:28rpx" />
				</view>
				<view class="item">
					<text class="label" >身份证号</text>
					<input type="idcard" v-model="form.idCard" placeholder="请输入您的身份证号" placeholder-style="font-size:28rpx" />
				</view>
			</view>
		</view>
		<view class="list-box">
			<view class="title">
				<view class="row1">
					<image src="@/static/location.png" class="icon" mode="widthFix"></image>
					当前居住地址
				</view>
				<view class="row2">
					金融机构不支持跨城市申请，请您选择您的当前居住城市
				</view>
			</view>
			<view class="lists">
				<view class="item ">
					<text class="label">当前居住城市</text>
					<view class="" style="flex-grow: 1;">
						<pickers :defaultAddress="['浙江省', '杭州市', '上城区']" @address="addressChange">
							<view class="addr-box">
								<view v-if="form.addressTitle" class="value-text">
									{{form.addressTitle}}
								</view>
								<view v-else style="color: gray;" class="value-text">
									请选择居住城市
								</view>
								<view class="" style="margin-left: 10rpx;">
									<uni-icons type="right" size="18" color="#969799"></uni-icons>
								</view>
							</view>
						</pickers>
					</view>
				</view>
			</view>
		</view>
		<view class="btns" @click="emits('submit', form)">
			提交资料
		</view>
		<view class="xieyi">
			<radio style="transform:scale(0.7)" color="#0256FF" :checked="true" />我已同意并阅读
			<text @click="toPage('个人信息授权及产品风险告知')" class="link">《个人信息授权书》</text>
		</view>
	</view>
</template>

<script setup>
	import pickers from "@/components/ming-picker/ming-picker.vue"
	import {
		reactive,
		nextTick
	} from 'vue'
	const emits = defineEmits(['submit']);
	const form = reactive({
		username: '',
		idCard: '',
		addressTitle: ''
	})
	//限制只能输入汉字
	function onKeyNameInput(event) {
		var value = event.target.value;

		if (!value || value == " ") {
			return '';
		}
		const rule = /[^\u4E00-\u9FA5]/g;
		nextTick(function() {
			form.username = value.replace(rule, '');
		})

	}

	function addressChange(e) {
		form.addressTitle = e.value.join('-')

		form.provinceCode = e.code[0]
		form.cityCode = e.code[1]
	}
	function toPage(name){
		uni.navigateTo({
			url:'/pages/webview/webview?name='+name
		})
	}
</script>

<style lang="scss" scoped>
	.userinfo-box {
		.duihua {
			width: 100%;
			background: url(@/static/duihua.png);
			background-size: 100%;
			margin-top: 10rpx;
			height: 80rpx;
			line-height: 85rpx;
			padding-left: 30rpx;
			color: #8F8C8F;
			font-size: 22rpx;
		}

		.list-box {
			margin-top: 50rpx;

			.title {

				.row1 {
					display: flex;
					align-items: center;
					color: #202020;
					font-weight: 500;
					font-size: 28rpx;

					.icon {
						width: 34rpx;
						margin-right: 4rpx;
					}
				}

				.row2 {
					color: #8F8C8F;
					font-size: 22rpx;
					margin-top: 6rpx;
				}
			}

			.lists {
				background: #F8F8FA;
				border: 1px solid #E8E8F0;
				border-radius: 20rpx;
				margin-top: 30rpx;

				.item {
					display: flex;
					align-items: center;
					padding: 30rpx 0;
					margin: 0 30rpx;

					&.border {
						border-bottom: 1px solid #E8E8F0;
					}

					input {
						text-align: right;
						flex-grow: 1
					}

					.label {
						color: #202020;
						font-size: 28rpx;

					}
				}

				.addr-box {
					font-size: 28rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}
			}
		}
		.btns{
			color: #fff;
			background: var(--primary-color);
			font-size:32rpx;
			font-weight: 500;
			padding: 30rpx;
			text-align: center;
			margin-top: 100rpx;
			border-radius: 20rpx;
		}
		.xieyi{
			color: #9C9E9C;
			font-size: 22rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 20rpx;
			.link{
				color:#0256FF;
			}
			
			image{
				width: 26rpx;
				margin-right: 4px;
			}
		}
	}
</style>